<template>
  <div class="widget">
    <!-- 地图划区域分析 -->
    <div v-bind:class='{active:isActive2}'
         class="map-widget"
         @click="mapAnalyze">
      <img class='img'
           src="@/static/image/划区域.png"
           title='区域分析'>
    </div>
    <!-- 测量工具 -->
    <div class='widget-box'>
      <div v-if='isShow'
           class='icon-box'>
        <!--  2d地图测面积 -->
        <div v-bind:class='{active:isActive3}'
             class='map-widget'
             @click='map2dArea'>
          <img src="@/static/image/测面积.png"
               class='img'
               alt="面积测量"
               title='面积测量'>
          <!-- <div class='widget-area-img'></div> -->
        </div>
        <!-- 2d地图测距离 -->
        <div class='map-widget'
             v-bind:class='{active:isActive4}'
             @click='map2dDistance'>
          <img class='img'
               src="@/static/image/测距离.png"
               title='距离测量'>
        </div>
        <!-- sketch工具 -->
        <div class='map-widget'
             v-bind:class='{active:isActive5}'
             @click='sketch'>
          <img class='img'
               src="@/static/image/素描绘图.png"
               title='素描绘图'>
        </div>
      </div>
      <!-- 测量总图标 -->
      <div class="map-widget"
           @click="iconShow">
        <img class='img'
             src="@/static/image/测量工具集.png"
             title='测量工具'>
      </div>
    </div>
    <!-- 热力图工具 -->
    <div class='widget-box'>
      <div v-if='isShow1'
           class='icon-box'>
        <!-- 蜂窝图显示隐藏 -->
        <div v-bind:class='{active:isActive1}'
             class="map-widget"
             @click="cellularToggle">
          <img class='img'
               src="@/static/image/蜂窝.png"
               title='蜂窝热力图'>
        </div>
        <!-- 热力图显示隐藏 -->
        <div v-bind:class='{active:isActive6}'
             class="map-widget"
             @click="heatmapToggle">
          <img class='img'
               src="@/static/image/热力图.png"
               title='热力图'>
        </div>
      </div>
      <!-- 热力图总图标 -->
      <div class=" map-widget"
           @click="iconShow1">
        <img class='img'
             src="@/static/image/蜂窝热力图集.png"
             title='热力图'>
      </div>
    </div>
    <!-- 回到起始位置 -->
    <div class=" map-widget"
         @click="mapHome">
      <img class='img'
           src="@/static/image/重置.png"
           title='重置地图'>
    </div>
    <!-- 是否全屏操作 -->
    <div v-bind:class="{ 'close-fullScreen':closeFullScreen ,'fullScreen':fullScreen}"
         class='map-widget'
         @click='toggle'
         title='是否全屏'>
      <div></div>
    </div>

  </div>
</template>

<script>
import Bus from "../utils/bus.js"
export default {
  name: "widget",
  data () {
    return {
      analyze: false,
      cellular: false,
      closeFullScreen: false,
      isShow1: false,
      isShow: false,
      fullScreen: true,
      isActive1: false,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false,
      isActive6: false
    }
  },
  mounted () {
    Bus.$on('reset', () => {
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isShow1 = false
      this.isShow = false

    })
  },
  methods: {
    iconShow () {
      this.isShow = !this.isShow
    },
    iconShow1 () {
      this.isShow1 = !this.isShow1
    },
    //  使用bus传递事件，在地图中on监听事件，然后触发地图事件
    cellularToggle () {
      this.isActive1 = !this.isActive1
      Bus.$emit("cellularToggle");
    },
    sketch () {
      this.isActive5 = !this.isActive5
      Bus.$emit('sketch')
    },
    heatmapToggle () {
      this.isActive6 = !this.isActive6
      Bus.$emit("heatmapToggle");
    },
    toggle () {
      this.closeFullScreen = !this.closeFullScreen
      this.fullScreen = !this.fullScreen
      Bus.$emit("toggle")
    },
    //控制画图分析
    mapAnalyze () {
      this.isActive2 = !this.isActive2
      this.analyze = !this.analyze
      console.log(this.analyze)
      if (this.analyze === true) {
        Bus.$emit("mapAnalyze");
      } else if (this.analyze === false) {
        console.log('取消画图？？')
        Bus.$emit("cancelAnalyze")
      }
    },
    mapHome () {
      Bus.$emit("reset");
    },
    map2dArea () {
      this.isActive3 = !this.isActive3
      Bus.$emit('2dArea')
    },
    map2dDistance () {
      this.isActive4 = !this.isActive4
      Bus.$emit('2dDistance')
    }


  }
};
</script>

<style lang="scss">
$precent: 100vw / 1920;
.widget {
  .widget-box {
    position: relative;
    .icon-box {
      top: 0;
      right: 55 * $precent;
      position: absolute;
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .map-widget {
    border: none;
    width: 55 * $precent;
    height: 50 * $precent;
    background: url("../../static/image/地图控件未选.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5 * $precent;
  }

  .map-widget:hover,
  .active,
  .map-widget:focus {
    background: url("../../static/image/地图控件选中.png") no-repeat;
    background-size: 100% 100%;
  }
  .img {
    height: 30 * $precent;
    width: 30 * $precent;
    background-size: 100% 100%;
  }
  .close-fullScreen {
    > div {
      height: 50 * $precent;
      width: 50 * $precent;
      background: url("../../static/image/1/退出全屏.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .fullScreen {
    > div {
      height: 50 * $precent;
      width: 50 * $precent;
      background: url("../../static/image/1/全屏.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
